<template>
  <div style="height: 2000px;">
    <section class="marginT10">
      <el-form label-width="80px" label-position="left" size="small">
        <el-row :gutter="50">
          <el-col :span="6">
            <el-form-item label="关键字:">
              <el-input v-model="query.executeRuleName" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="执行状态:">
              <el-select v-model="query.executeAction" placeholder="执行状态" clearable>
                <el-option v-for="(item,index) in executeActionList" :key="index" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
    <section class="marginT10">
      <el-row>
        <el-col :span="18">
          <el-button type="success" size="small" icon="el-icon-video-play"
                     @click="executeTaskHandler">执行
          </el-button>
          <el-button type="success" size="small" style="margin-left: 25px" icon="el-icon-check"
                     @click="updateExecuteActionHandler(1)">启用
          </el-button>
          <el-button type="warning" size="small" icon="el-icon-close" @click="updateExecuteActionHandler(3)">停用
          </el-button>
          <el-button type="danger" size="small" style="margin-left: 25px" icon="el-icon-delete"
                     @click="deleteTaskHandler">删除
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="small" class="floatR" style="margin-left: 10px" @click="handleQueryInfo">查询
          </el-button>
          <el-button type="success" size="small" icon="el-icon-plus" class="floatR" @click="openAddDialogHandler()">新建
          </el-button>
        </el-col>
      </el-row>
    </section>
    <section>
      <el-table class="table" :data="pageInfo.list" border size="mini" header-align="center"
                ref="singleTable"
                stripe
                @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="40">
        </el-table-column>
        <el-table-column
          type="index"
          width="35">
        </el-table-column>
        <el-table-column prop="ruleName" label="任务名" header-align="center">
        </el-table-column>
        <el-table-column prop="createdUser" label="创建人" align="center" width="90">
        </el-table-column>
        <el-table-column prop="cronExpression" label="执行计划" align="center" width="100">
        </el-table-column>
        <el-table-column prop="cronExpressionName" label="执行说明" align="center" width="130">
        </el-table-column>
        <el-table-column prop="lastExecuteDate" label="最近执行" align="center" width="140">
        </el-table-column>
        <el-table-column prop="nextExecuteDate" label="下次执行" align="center" width="140">
        </el-table-column>
        <el-table-column prop="executeActionName" label="任务状态" align="center" width="70">
        </el-table-column>
        <el-table-column prop="executeSeconds" label="执行耗时" align="center" width="70">
        </el-table-column>
        <el-table-column prop="processStatusName" label="执行状态" align="center" width="70">
        </el-table-column>
        <el-table-column label="报警状态" width="220" align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-date" circle size="mini"
                       @click="openUpdateExecuteDialogHandler(scope.row)"></el-button>
            <el-button type="primary" icon="el-icon-news" circle size="mini"
                       @click="openUpdateAcqDialogHandler(scope.row)"></el-button>
            <el-button type="primary" icon="el-icon-check" circle size="mini"
                       @click="openUpdateCheckDialogHandler(scope.row)"></el-button>
            <el-button size="mini" type="success" @click="openRecordDialogHandler(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- table end  -->
      <div class="pagination-table">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-size="pageInfo.pageSize"
          :page-sizes="[10, 15, 30, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total">
        </el-pagination>
      </div>
    </section>
    <el-dialog
      title="添加规则"
      :visible.sync="addDialogVisible"
      width="90%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="true">
      <taskAddComponent @closeAddDialogHandler="closeAddDialogHandler" v-if="hackReset"></taskAddComponent>
    </el-dialog>
    <el-dialog
      title="修改执行规则"
      :visible.sync="updateExecuteDialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="true"
      @closed="closeUpdateExecuteDialogHandler">
      <executeRuleManageComponent @closeUpdateExecuteDialogHandler="closeUpdateExecuteDialogHandler" v-if="hackReset"
                              :executeRuleId="executeRuleId"></executeRuleManageComponent>
    </el-dialog>
    <el-dialog
      title="修改采集规则"
      :visible.sync="updateAcqDialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="true"
      @closed="closeUpdateAcqDialogHandler">
      <acqRuleManageComponent @closeUpdateAcqDialogHandler="closeUpdateAcqDialogHandler" v-if="hackReset"
                          :executeRuleId="executeRuleId"></acqRuleManageComponent>
    </el-dialog>
    <el-dialog
      title="修改检查和消息通知规则"
      :visible.sync="updateCheckDialogVisible"
      width="90%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="true"
      @closed="closeUpdateCheckDialogHandler">
      <checkRuleManageComponent @closeUpdateCheckDialogHandler="closeUpdateCheckDialogHandler" v-if="hackReset"
                            :executeRuleId="executeRuleId"></checkRuleManageComponent>
    </el-dialog>
    <el-dialog
      title="执行记录详情"
      :visible.sync="recordDialogVisible"
      width="90%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="true"
      @closed="closeRecordDialogHandler">
      <recordListComponent @closeRecordDialogHandler="closeRecordDialogHandler" v-if="hackReset"
                           :executeRuleId="executeRuleId"></recordListComponent>
    </el-dialog>
  </div>
</template>

<script>
  import {listView, updateExecuteAction, executeTask, deleteTask} from '@/api/rule/index'
  import taskAddComponent from '@/components/rule/taskAddComponent.vue'
  import executeRuleManageComponent from '@/components/rule/executeRuleManageComponent.vue'
  import acqRuleManageComponent from '@/components/rule/acqRuleManageComponent.vue'
  import checkRuleManageComponent from '@/components/rule/checkRuleManageComponent.vue'
  import recordListComponent from '@/components/rule/recordListComponent.vue'

  export default {
    data() {
      return {
        query: {
          executeRuleName: null,
          executeAction: null
        },
        executeActionList: [],
        hackReset: true,
        pageInfo: {},
        addDialogVisible: false,
        updateExecuteDialogVisible: false,
        updateAcqDialogVisible: false,
        updateCheckDialogVisible: false,
        recordDialogVisible: false,
        executeRuleId: null,
        multipleSelection: []
      }
    },
    methods: {
      // 变更每页显示数量
      handleSizeChange(val) {
        let page = {}
        page.pageSize = val
        page.pageNum = this.pageInfo.pageNum
        this.handleFetchData(page)
      },
      // 更换当前页
      handleCurrentChange(val) {
        let page = {}
        page.pageNum = val
        page.pageSize = this.pageInfo.pageSize
        this.handleFetchData(page)
      },
      // 查询数据
      handleFetchData(page) {
        let query = this.query;
        query.pageInfo = page;
        listView(query).then(response => {
          this.pageInfo = response.data.pageInfo;
          this.executeActionList = response.data.executeActionList;
        })
      },
      // 查询信息
      handleQueryInfo() {
        this.handleFetchData({
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize
        })
      },
      // 处理表格复选框变更
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 修改执行规则状态事件
      updateExecuteActionHandler(val) {
        this.multipleSelection.forEach((item, index) => {
          updateExecuteAction({
            executeRuleId: item.id,
            executeAction: val
          }).then(response => {
            if (response.status === 0) {
              this.$message({
                message: '执行规则[' + item.ruleName + ']修改成功',
                type: 'success'
              });
              this.handleQueryInfo();
            }
          });
        });
      },
      // 执行特定任务事件
      executeTaskHandler() {
        this.multipleSelection.forEach((item, index) => {
          executeTask({
            executeRuleId: item.id
          }).then(response => {
            if (response.status === 0) {
              this.$message({
                message: '执行规则[' + item.ruleName + ']已发起执行',
                type: 'success'
              });
              this.handleQueryInfo();
            }
          });
        });
      },
      // 删除特定任务事件
      deleteTaskHandler() {
        this.multipleSelection.forEach((item, index) => {
          deleteTask({
            executeRuleId: item.id
          }).then(response => {
            if (response.status === 0) {
              this.$message({
                message: '删除规则[' + item.ruleName + ']成功',
                type: 'success'
              });
              this.handleQueryInfo();
            }
          });
        });
      },
      // 打开添加任务弹框
      openAddDialogHandler() {
        this.addDialogVisible = true;
      },
      // 关闭添加任务弹框
      closeAddDialogHandler() {
        this.addDialogVisible = false;
        this.hackReset = false
        this.$nextTick(() => {
          this.hackReset = true
        })
        this.handleQueryInfo();
      },
      // 打开修改执行规则弹框
      openUpdateExecuteDialogHandler(item) {
        this.executeRuleId = item.id;
        this.hackReset = false
        this.$nextTick(() => {
          this.hackReset = true
        })
        this.updateExecuteDialogVisible = true;
      },
      // 关闭修改执行规则弹框
      closeUpdateExecuteDialogHandler() {
        this.updateExecuteDialogVisible = false;
        this.handleQueryInfo();
      },
      // 打开修改采集规则弹框
      openUpdateAcqDialogHandler(item) {
        this.executeRuleId = item.id;
        this.hackReset = false
        this.$nextTick(() => {
          this.hackReset = true
        })
        this.updateAcqDialogVisible = true;
      },
      // 关闭修改采集规则弹框
      closeUpdateAcqDialogHandler() {
        this.updateAcqDialogVisible = false;
        this.handleQueryInfo();
      },
      // 打开修改检查规则弹框
      openUpdateCheckDialogHandler(item) {
        this.executeRuleId = item.id;
        this.hackReset = false
        this.$nextTick(() => {
          this.hackReset = true
        })
        this.updateCheckDialogVisible = true;
      },
      // 关闭修改检查规则弹框
      closeUpdateCheckDialogHandler() {
        this.updateCheckDialogVisible = false;
        this.handleQueryInfo();
      },
      // 打开记录弹框
      openRecordDialogHandler(item) {
        this.executeRuleId = item.id;
        this.hackReset = false
        this.$nextTick(() => {
          this.hackReset = true
        })
        this.recordDialogVisible = true;
      },
      // 关闭记录弹框
      closeRecordDialogHandler() {
        this.recordDialogVisible = false;
      }
    },
    created() {
      this.pageInfo.pageSize = 15
      this.handleQueryInfo()
    },
    components: {
      taskAddComponent,
      executeRuleManageComponent,
      acqRuleManageComponent,
      checkRuleManageComponent,
      recordListComponent
    }
  }
</script>

<style scoped>

</style>
